<template>
  <view class="work-container">
    <u-navbar placeholder autoBack>
      <view slot="center" style="width: 70vw">
        <TopBar :tabBars="tabBars" :tabIndex="tabIndex" @change="onTabChange"></TopBar>
      </view>
    </u-navbar>
    <view style="height: 14px"></view>
    <component ref="listRef" v-bind:is="currentTabComponent" :data="data"></component>
  </view>
</template>

<script>
//
import handle from './components/handle.vue'
import pending from './components/pending.vue'
import TopBar from '@/components/top-bar/index.vue'
import UNavbar from '@/uni_modules/uview-ui/components/u-navbar/u-navbar.vue'
export default {
  components: {
    UNavbar,
    TopBar,
    handle,
    pending
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName
    }
  },
  data() {
    return {
      tabBars: [
        {
          name: '待办',
          componentName: 'pending',
          index: 0
        },
        {
          name: '经办',
          componentName: 'handle',
          index: 1
        }
      ],
      tabIndex: 0,
      data: null
    }
  },
  onPullDownRefresh() {
    this.$refs.listRef.reloadData()
  },
  onReachBottom() {
    this.$refs.listRef.getList()
  },
  methods: {
    onTabChange(obj) {
      if (this.tabIndex === obj.index) {
        return
      }
      this.tabIndex = obj.index
    }
  }
}
</script>

<style lang="scss" scoped></style>
